<template>
  <div class="wrapper">
    <div class="swiper">
      <div class="swiper1">
        <div class="pMain">
          <div class="prizelist">
            <!-- 红包 -->
            <div class="item hb">
              <div>
                <span
                  v-bind:class="[prizeInfo['5'].prize? 'hasPrize' : 'noPrize']"
                >{{prizeInfo["5"].prize?"已领取":"未领取"}}</span>
              </div>
            </div>
            <!-- 话费玻璃碗 -->
            <div class="item hf">
              <div>
                <span
                  v-bind:class="[prizeInfo['1'].prize? 'hasPrize' : 'noPrize']"
                >{{prizeInfo["1"].prize?"已领取":"未领取"}}</span>
              </div>
            </div>
            <!-- 助力礼包 -->
            <div class="item zl">
              <div>
                <span
                  v-bind:class="[prizeInfo['3'].prize? 'hasPrize' : 'noPrize']"
                >{{prizeInfo["3"].prize?"已领取":"未领取"}}</span>
              </div>
            </div>
          </div>
          <!-- 说明 -->
          <div class="intro">
            <!-- 红包 -->
            <div class="intro_item" v-show="prizeInfo['5'].prize">{{prizeInfo['5'].prize}}</div>
            <!-- 话费/玻璃碗 -->
            <div class="intro_item" v-show="prizeInfo['1'].prize">
              话费/玻璃碗：{{prizeInfo['1'].prize}}
              {{prizeInfo['1'].code?('兑换码：'+prizeInfo['1'].code):''}}
              <div v-show="prizeInfo['1'].address">领奖地址：{{prizeInfo['1'].address}}</div>
            </div>
            <!-- 助力礼包 -->
            <div class="intro_item" v-show="prizeInfo['3'].prize">
              助力礼包：{{ prizeInfo['3'].prize}}
              {{prizeInfo['3'].code?('兑换码：'+prizeInfo['1'].code):''}}
              <div v-show="prizeInfo['3'].address">领奖地址：{{prizeInfo['3'].address}}</div>
              <div
                v-show="prizeInfo['3'].codeStatus==1"
                class="writebtn"
                @click="clickWriteBtn"
              >点击此处填写领奖信息</div>
            </div>
          </div>
        </div>
        <div class="return" @click="ret">
          <img src="http://assets.rurushishi.com/activies/zdfzh/voice_backindex.png" alt>
        </div>
      </div>
    </div>
    <div class="writeinfo" v-show="isShowWriteInfo">
      <div class="writeinfo_warp">
        <div class="writeinfo_prizeinfo">恭喜您中助力大奖啦！</div>
        <div class="writeinfo_tips">填写以下信息领取奖励！</div>
        <div class="writeinfo_name">
          <input v-fixedInput v-model="userWriteForm.name" type="text" placeholder="请输入您的姓名">
        </div>
        <div class="writeinfo_mobile">
          <input v-fixedInput v-model="userWriteForm.mobile" type="text" placeholder="请输入您的手机号">
        </div>
        <div class="writeinfo_code">
          <div class="left">
            <input v-fixedInput v-model="userWriteForm.code" type="text" placeholder="请输入验证码">
          </div>
          <div class="right">
            <div class="writeinfo_code_btn saclebtn" @click="clickCode">{{VerShowTxt}}</div>
          </div>
        </div>
        <div class="writeinfo_add">
          <!-- <Multiselect
            v-model="userWriteForm.addr"
            :options="addrList"
            placeholder="请选择领奖地址"
            :searchable="false"
            @input="selectAddr"
            :allow-empty="false"
            :show-labels="false"
            track-by="name"
            label="name"
          >
            <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>
          </Multiselect> -->
          <!-- <div class="writeinfo_add_detail">{{userWriteForm.addrDetail}}</div> -->
          <div class="writeinfo_add_detail">领奖地址：中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777</div>
        </div>
        <div class="writeinfo_btns">
          <div class="writeinfo_btns_close saclebtn" @click="clickClose">关闭</div>
          <div class="writeinfo_btns_ok saclebtn" @click="clickSubmit">提交</div>
        </div>
      </div>
    </div>
    <music></music>
    <Bottom :baseText="baseText"></Bottom>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import utils from "@/utils/utils";
import request from "@/utils/request";
import Cookies from "js-cookie";
import * as config from "./config";
// import wxsdk from "@/utils/wxsdk";
// import wx from "weixin-js-sdk";
import Bottom from "@/components/common/Bottom";
import Multiselect from "vue-multiselect";
import music from "./components/music";
export default {
  components: {
    Bottom,
    Multiselect,
    music
  },
  watch: {
    userWriteForm: {
      handler() {
        if (this.userWriteForm.code.length > 4) {
          this.userWriteForm.code = this.userWriteForm.code.substring(0, 4);
        }
      },
      deep: true
    }
  },
  data() {
    return {
      openid: Cookies.get("openid"),
      userInfo: {
        user: {
          nickname: "",
          headimgurl: ""
        }
      }, //用户信息
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },
      /**
       * 1、语音奖励 话费、玻璃套碗
       * 2、优惠券
       * 3、助力奖
       * 4、大转盘
       * 5、红包
       */
      prizeInfo: {
        "1": {
          // flag: true,
          // code: "nzqHDP",
          // prize: "精美玻璃套碗",
          // address: "中鼎理想城"
        },
        "2": {},
        "3": {
          // flag: true,
          // code: "nzqHDP",
          // prize: "华为手机",
          // address: "中鼎理想城"
          // codeStatus: 1
        },
        "4": {},
        "5": {}
      },
      // 用户填写的信息
      userWriteForm: {
        name: "",
        mobile: "",
        code: "",
        addr: "中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777",
        addrName: "中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777",
        addrDetail: "中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777"
      },
      isShowWriteInfo: false,
      IsCanVer: true, //是否能发送验证码
      VerShowSec: 60, //读秒
      VerShowTxt: "获取验证码",
      baseText: config.BASE_TEXT,
      addrList: [
        {
          name: "中鼎理想城",
          detail:
            "滨江路与学院路（公园西街）交叉口东北角，中鼎理想城体验中心，电话：0319-2331111"
        },
        {
          name: "中鼎麒麟公馆",
          detail:
            "中鼎麒麟公馆：开元路与龙泉大街交叉口东行200米路北，电话：0319-5998111、0319-3551111"
        },
        {
          name: "中鼎麒麟郡+",
          detail:
            "中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777"
        }
      ]
    };
  },
  methods: {
    // 选择地址下拉列表框
    selectAddr: function(data) {
      this.userWriteForm.addrName = data.name;
      this.userWriteForm.addrDetail = data.detail;
      console.log(this.userWriteForm);
    },
    // 点击获取验证码
    clickCode: function() {
      let that = this;
      if (that.IsCanVer) {
        var phone = that.userWriteForm.mobile;
        if (phone.length == 0) {
          MessageBox.alert("请输入手机号！");
        } else if (!utils.isMobile(phone)) {
          MessageBox.alert("请输入正确的手机号！");
        } else {
          that.IsCanVer = false;
          that.VerShowTxt = that.VerShowSec + "s";
          that.VerShowSec--;
          setInterval(function() {
            if (that.IsCanVer == false) {
              if (that.VerShowSec == 0) {
                that.VerShowTxt = "获取验证码";
                that.IsCanVer = true;
                that.VerShowSec = 60;
              } else {
                that.VerShowTxt = that.VerShowSec + "s";
                that.VerShowSec--;
              }
            }
          }, 1000);
          that.getSmsCode().then(function(data) {
            MessageBox.alert("验证码已发送到您的手机！");
          });
        }
      }
    },
    // 点击关闭表单
    clickClose: function() {
      this.isShowWriteInfo = false;
    },
    // 点击提交表单
    clickSubmit: function() {
      let that = this;
      var name = that.userWriteForm.name;
      var phone = that.userWriteForm.mobile;
      var vercode = that.userWriteForm.code;
      var address = that.userWriteForm.addrDetail;
      if (name.length == 0) {
        MessageBox.alert("请输入姓名！");
      } else if (phone.length == 0) {
        MessageBox.alert("请输入手机号！");
      } else if (!utils.isMobile(phone)) {
        MessageBox.alert("请输入正确的手机号！");
      } else if (vercode.length == 0) {
        MessageBox.alert("请输入验证码！");
      } else if (address.length == 0) {
        MessageBox.alert("请选择领奖地址！");
      } else {
        // 提交
        console.log("userWriteForm", that.userWriteForm);
        // alert(JSON.stringify(that.userWriteForm));
        that.cashPrize().then(function(data) {
          config.addUserInfoWithPhoneAndBindRegister(
            that.receiveSpreadInfo.ouid,
            that.openid,
            phone,
            name
          );
          console.log("cashPrize", data);
          // alert(JSON.stringify(data));
          //提交成功
          MessageBox.alert("提交成功！").then(() => {
            // that.gotoUrl("index");
            that.pushUrl("index");
          });
        });
      }
    },
    // 点击展示填写助力奖的领奖信息
    clickWriteBtn() {
      this.isShowWriteInfo = true;
    },
    // 点击返回首页
    ret() {
      // this.gotoUrl("index");
      this.pushUrl("index");
    },
    // 领取助力奖品
    cashPrize() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}cashPrize?activityId=${
              config.activityId
            }&address=${encodeURIComponent(
              that.userWriteForm.addrDetail
            )}&code=${that.prizeInfo["3"].code}&mobile=${
              that.userWriteForm.mobile
            }&name=${encodeURIComponent(that.userWriteForm.name) ||
              "1"}&openId=${that.openid}&smsCode=${that.userWriteForm.code}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 获取验证码
    getSmsCode() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}getSmsCode?activityId=${
              config.activityId
            }&mobile=${that.userWriteForm.mobile}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 获取我的奖品
    getMyPrizes() {
      let that = this;
      request
        .get(`${that.global.API_ACT_URL}getMyPrizes`, {
          activityId: config.activityId,
          openId: that.openid
        })
        .then(function(data) {
          if (data["1"].address) {
            data["1"].address = decodeURIComponent(data["1"].address);
          }
          if (data["3"].address) {
            data["3"].address = decodeURIComponent(data["3"].address);
          }
          that.prizeInfo = data;
        });
    },
    // 提交分享成功回调
    shareCallBack() {
      let that = this;
      request
        .post(
          `${that.global.API_ACT_URL}share?activityId=${
            config.activityId
          }&openId=${that.openid}`,
          {}
        )
        .then(function(data) {});
    },
    // 跳转本项目的其他链接
    gotoUrl(page) {
      // 带上本页面的传播信息
      let url =
        location.protocol +
        "//" +
        location.host +
        this.global.GLOBAL_BASE_PATH +
        "/";
      if (this.$route.fullPath.indexOf("?") > -1) {
        url += page + "?" + this.$route.fullPath.split("?")[1];
      } else {
        url += page;
      }
      location.href = url;
    },
    // 通过路由方式跳转本项目的其他链接
    pushUrl(page) {
      // 带上本页面的传播信息
      let url = "";
      let fullPathNoShare = this.$route.fullPath;
      fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
      if (fullPathNoShare.indexOf("?") > -1) {
        url = page + "?" + fullPathNoShare.split("?")[1];
      } else {
        url = page;
      }
      this.$router.push("/" + url);
    },
    /**
     * 初始化
     * 1、设置传播传播信息
     * 2、获取用户信息
     * 3、设置分享信息
     */
    init() {
      let that = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      if (this.$route.query.isshare) this.$route.query.isshare = true;
      config.getUserInfo().then(function(userInfo) {
        that.userInfo = userInfo;
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          that.userInfo &&
          that.userInfo.user &&
          that.userInfo.user.nickname
        ) {
          shareObj.title = `${
            that.userInfo.user.nickname
          }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
        }

        if (that.userInfo.salerOrAgent) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}&ouid=${that.openid}`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        config.initShare(shareObj);
        that.global.SHARE_CALLBACK_OK = function(type) {
          that.shareCallBack();
        };
      });
    }
  },
  mounted() {},
  created() {
    this.init();
    this.getMyPrizes();
  }
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css">
</style>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl';

.wrapper {
  width: 100%;
  height: 100%;
}

.swiper1 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('http://assets.rurushishi.com/activies/zdfzh/prize_bg.jpg') repeat center center;
  background-size: 100% 100%;
}

.pMain {
  width: 100%;
  margin-top: 4rem;
}

.prizelist {
  position: relative;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.prizelist .item {
  width: 30%;
  height: 3rem;
  position: relative;
}

.prizelist .item.hb {
  background: url('http://assets.rurushishi.com/activies/zdfzh/prize_hb.png') repeat center center;
  background-size: 100% 100%;
}

.prizelist .item.hf {
  background: url('http://assets.rurushishi.com/activies/zdfzh/prize_hf.png') repeat center center;
  background-size: 100% 100%;
}

.prizelist .item.zl {
  background: url('http://assets.rurushishi.com/activies/zdfzh/prize_zl.png') repeat center center;
  background-size: 100% 100%;
}

.prizelist .item>div {
  position: absolute;
  bottom: 0.5rem;
  width: 100%;
}

.prizelist .item>div>span {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  display: block;
  color: #000000;
  padding: 0.1rem;
  border-radius: 0.2rem;
}

.prizelist .item .hasPrize {
  background-color: #a0a0a0;
}

.prizelist .item .noPrize {
  background-color: #eee1aa;
}

.intro {
  width: 90%;
  margin: 0 auto;
  color: #ffffff;
  margin-top: 0.5rem;
  line-height: 0.4rem;
}

.intro_item {
  margin-top: 0.1rem;
}

.writebtn {
  text-decoration: underline;
}

.return {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center;
}

.return>img {
  width: 2rem;
}

.writeinfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.writeinfo_warp {
  position: relative;
  width: 80%;
  background-color: blue;
  background: url('http://assets.rurushishi.com/activies/zdfzh/voice_write_info_bg2.png') repeat center center;
  background-size: 100% 100%;
  padding: 0.5rem 0;
}

.writeinfo_warp >div {
  margin-top: 0.3rem;
}

// .writeinfo_bg {
// position: absolute;
// }

// .writeinfo_bg img {
// width: 100%;
// }
.writeinfo_prizeinfo {
  margin-top: 0rem !important;
  width: 100%;
  text-align: center;
  font-size: 0.4rem;
  color: #ffffff;
}

.writeinfo_tips {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.writeinfo_name {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_name input {
  border-radius: 15px;
  width: 80%;
  height: 30px;
  text-indent: 15px;
  border-color: #eee1a9;
}

.writeinfo_mobile {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_mobile input {
  border-radius: 15px;
  width: 80%;
  height: 30px;
  text-indent: 15px;
  border-color: #eee1a9;
}

.writeinfo_code {
  width: 80%;
  margin: 0.2rem auto 0 auto;
  display: flex;
}

.writeinfo_code .left {
  width: 55%;
}

.writeinfo_code .right {
  width: 45%;
}

.writeinfo_code input {
  border-radius: 15px;
  width: 100%;
  height: 30px;
  text-indent: 15px;
  border-color: #eee1a9;
}

.writeinfo_code .writeinfo_code_btn {
  border-radius: 0.3rem;
  width: 90%;
  margin-left: 10%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  background-color: #eee1a9;
}

.multiselect {
  width: 80%;
  margin: 0 auto;
  height: 0.6rem;
}

.writeinfo_add_detail {
  width: 80%;
  margin: 0.3rem auto 0 auto;
  color: #ffffff;
  line-height: 0.4rem;
}

.writeinfo_btns {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

.writeinfo_btns >div {
  width: 30%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #eee1a9;
  border-radius: 0.3rem;
}

[contenteditable='true'], input, textarea {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important;
}
</style>
